<template>
  <div class="model-config">
    <el-tabs>
      <!-- 基础配置 -->
      <el-tab-pane label="基础配置">
        <el-form :model="form" label-width="120px">
          <el-form-item label="服务端点">
            <el-input v-model="form.endpoint" placeholder="http://localhost:11434" />
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <!-- 会话模型配置 -->
      <el-tab-pane label="会话模型">
        <el-form :model="form" label-width="120px">
          <el-form-item label="模型选择">
            <el-select v-model="form.model" placeholder="选择模型" filterable>
              <el-option
                v-for="model in availableModels"
                :key="model.name"
                :label="model.name"
                :value="model.name"
              >
                <span>{{ model.name }}</span>
                <span class="model-size">{{ formatSize(model.size) }}</span>
              </el-option>
            </el-select>
            <el-button
              type="primary"
              link
              :loading="pulling"
              @click="handlePullModel(form.model)"
            >
              更新模型
            </el-button>
          </el-form-item>

          <el-form-item label="Temperature">
            <el-slider v-model="form.parameters.temperature" :min="0" :max="1" :step="0.1">
              <template #tooltip>{{ form.parameters.temperature }}</template>
            </el-slider>
          </el-form-item>

          <el-form-item label="Top P">
            <el-slider v-model="form.parameters.top_p" :min="0" :max="1" :step="0.1">
              <template #tooltip>{{ form.parameters.top_p }}</template>
            </el-slider>
          </el-form-item>

          <el-form-item label="Top K">
            <el-slider v-model="form.parameters.top_k" :min="1" :max="100" :step="1">
              <template #tooltip>{{ form.parameters.top_k }}</template>
            </el-slider>
          </el-form-item>

          <el-form-item label="最大长度">
            <el-slider v-model="form.parameters.max_tokens" :min="256" :max="4096" :step="256">
              <template #tooltip>{{ form.parameters.max_tokens }}</template>
            </el-slider>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <!-- 嵌入模型配置 -->
      <el-tab-pane label="嵌入模型">
        <el-form :model="form" label-width="120px">
          <el-form-item label="模型选择">
            <el-select v-model="form.embeddingModel" placeholder="选择嵌入模型" filterable>
              <el-option
                v-for="model in availableModels"
                :key="model.name"
                :label="model.name"
                :value="model.name"
              >
                <span>{{ model.name }}</span>
                <span class="model-size">{{ formatSize(model.size) }}</span>
              </el-option>
            </el-select>
            <el-button
              type="primary"
              link
              :loading="pulling"
              @click="handlePullModel(form.embeddingModel)"
            >
              更新模型
            </el-button>
          </el-form-item>

          <el-form-item label="向量维度">
            <el-input-number
              v-model="form.embedding.dimension"
              :min="128"
              :max="4096"
              :step="128"
              controls-position="right"
            />
          </el-form-item>

          <el-form-item label="批处理大小">
            <el-input-number
              v-model="form.embedding.batchSize"
              :min="1"
              :max="64"
              :step="1"
              controls-position="right"
            />
          </el-form-item>

          <el-form-item>
            <el-checkbox v-model="form.embedding.cache">启用缓存</el-checkbox>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>

    <div class="actions">
      <el-button type="primary" @click="handleSubmit" :loading="saving">保存配置</el-button>
      <el-button @click="handleReset">重置</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  getModelConfig, 
  updateModelConfig, 
  listModels, 
  pullModel 
} from '@/api/model'
import { formatSize } from '@/utils/file'

const form = ref({
  model: '',
  embeddingModel: '',
  endpoint: '',
  parameters: {
    temperature: 0.7,
    top_p: 0.9,
    top_k: 40,
    max_tokens: 2048
  },
  embedding: {
    dimension: 768,
    batchSize: 32,
    cache: true
  }
})

const availableModels = ref([])
const pulling = ref(false)
const saving = ref(false)

// 获取当前配置
const fetchConfig = async () => {
  try {
    const { data } = await getModelConfig()
    form.value = data
  } catch (error) {
    ElMessage.error('获取配置失败')
  }
}

// 获取可用模型列表
const fetchModels = async () => {
  try {
    const { data } = await listModels()
    availableModels.value = data
  } catch (error) {
    ElMessage.error('获取模型列表失败')
  }
}

// 拉取模型
const handlePullModel = async (modelName) => {
  if (!modelName) {
    ElMessage.warning('请先选择模型')
    return
  }

  try {
    await ElMessageBox.confirm(
      `确定要更新模型 ${modelName} 吗？这可能需要一些时间。`,
      '更新确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    pulling.value = true
    await pullModel(modelName)
    ElMessage.success('模型更新成功')
    await fetchModels()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('模型更新失败')
    }
  } finally {
    pulling.value = false
  }
}

// 提交配置
const handleSubmit = async () => {
  try {
    saving.value = true
    await updateModelConfig(form.value)
    ElMessage.success('配置更新成功')
  } catch (error) {
    ElMessage.error('配置更新失败')
  } finally {
    saving.value = false
  }
}

// 重置配置
const handleReset = () => {
  fetchConfig()
}

onMounted(() => {
  fetchConfig()
  fetchModels()
})
</script>

<style lang="scss" scoped>
.model-config {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;

  .model-size {
    float: right;
    color: var(--el-text-color-secondary);
    font-size: 13px;
  }

  .actions {
    margin-top: 24px;
    text-align: center;
  }

  :deep(.el-form-item__content) {
    display: flex;
    align-items: center;
    gap: 12px;
  }
}
</style> 